<template>
  <div class="app-container" style="display:flex;">
    <div style="width: 75%;">
      <div class="filter-container">
        <el-form ref="dataForm" v size="mini" :model="listQuery" label-position="right" label-width="auto">
          <div class="lineBox">
            <el-form-item label="机构或人名" prop="name">
              <el-input v-model="listQuery.name" size="mini" placeholder="" style="width: 120px;" />
            </el-form-item>
          </div>
          <div class="lineBox">
            <el-button ref="myButton" size="mini" type="primary" icon="el-icon-search" native-type="submit"
              @click="handleFilter">
              模糊查询
            </el-button>
          </div>
        </el-form>
      </div>

      <div class="myTable1">
        <div style="min-height:650px; width: 100%; padding: 20px 40px 40px 5px;">
          <div v-if="show==false"
            style="    height: 650px;display: flex;  align-items: center;    justify-content: center;   font-size: 24px;  font-weight: bold;  color: rgb(153 153 153);   font-family: 'Arial', sans-serif;">
            暂无数据
          </div>
          <div v-if="show==true">
            <el-timeline :reverse="true">
              <el-timeline-item v-for="(item,index) in timeList" :key="index" :timestamp="index + '年'" placement="top">
                <el-card>
                  <div v-for="(itemc ,indexc) in timeList[index]" :key="indexc" class="badge-container"
                    @click="node(itemc)">
                    <div class="badge-left">
                      {{ itemc[1] }}
                    </div>
                    <div class="badge-right">
                      {{ itemc[2] }}
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 25%; margin-left: 10px; min-height:650px;padding: 20px 5px 0px 5px;" class="myTable1">
      <div style="font-size: 14px;font-weight: bold;">
        {{ nodeName }}
      </div>
      <div style="font-size: 12px;color: #5e6d82; margin-top: 10px;">
        <el-tag v-if="type" type="success" size="mini">
          {{ type }}
        </el-tag>
      </div>
      <div class="bixi-group-container-title">
        <div class="bixi-group-container-blue-block" /><label class="groupcontainer-title-F4sp83QczG">文档溯源</label><span
          class="bixi-group-container-description" />
        <div style="margin-left: 8px;  min-height:150px;overflow-y:auto; max-height: 200px;">
          <div v-if="dhtitleList.length>0">
            <div v-for="(item,index) in dhtitleList" :key="index" class="dhtitle">
              {{ index+1 }}. <el-link style="font-size: 12px;" class="always-underlined"
                :href="`/dashboard/docview?id=${item.id}`" target="_blank" type="primary">
                {{ item.dh }}
              </el-link>
            </div>
          </div>
          <div v-else
            style="text-align: center;    color: #909399;    font-weight: normal !important;font-size: 12px;    line-height: 60px;">
            可点图谱中实体加载
          </div>
        </div>
      </div>
      <div class="bixi-group-container-title">
        <div class="bixi-group-container-blue-block" /><label class="groupcontainer-title-F4sp83QczG">属性信息</label><span
          class="bixi-group-container-description" />
        <div style="margin-left: 8px;">
          <el-table :data="tableData" border style="width: 100%; min-height: 100px;" :show-header="false"
            empty-text="可点图谱中实体加载">
            <el-table-column prop="zd" label="id" width="100">
              <template slot-scope="{row,$index}">
                <div class="custom-font">
                  {{ row.zd }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="value" show-overflow-tooltip label="value">
              <template slot-scope="{row,$index}">
                <div class="custom-font">
                  {{ row.value }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { artApi } from '@/api/art'
import { questionsanswersApi } from '@/api/questionsanswers'

export default {

  data() {
    return {
      show: false,
      timeList: [],
      dh: "",
      nodeName: "",
      type: "",
      dhtitleList: [],
      tableData: [],
      selectedNode: null,
      listLoading: false,
      listQuery: { name: "", project_id: "" },


    }
  },



  mounted() {

    this.title = this.$route.query.title
    this.project_id = this.$route.query.project_id

    if (this.title) {
      this.listQuery.name = this.title
      this.handleFilterTitle()

    }

    if (this.project_id) {
      this.listQuery.project_id = this.project_id
      this.handleFilterTitle()
    } else {
      let data = localStorage.getItem('data');
      let arr = JSON.parse(data)
      this.listQuery.project_id = arr.id
    }




  },
  methods: {

    async suyuan(dh) {

      const response = await questionsanswersApi("getIdBydh", { "dh": dh })
      if (response.code == 200) {

        return response.data

      }


    },


    async node(node) {


      console.log(node)
      let data = {
        name: node[2]
      }

      let id = await this.suyuan(node[3])
      // this.raceability(data)

      this.dhtitleList = [{ id: id, dh: node[3] }]

      this.nodeName = node.name
      this.type = node.type



      data = {
        id: node[2]
      }
      this.attributeInformation(data)
    },


    async getIdByDhraceability(node) {



      let params = node
      let data = localStorage.getItem('data');
      let arr = JSON.parse(data)
      params.project_id = arr.id;

      const response = await artApi("raceability", params)

      if (response.code == 200) {

        this.dhtitleList = response.data
        this.nodeName = node.name
        this.type = node.type
      }


    },


    async raceability(node) {



      let params = node
      let data = localStorage.getItem('data');
      let arr = JSON.parse(data)
      params.project_id = arr.id;

      const response = await artApi("raceability", params)

      if (response.code == 200) {

        this.dhtitleList = response.data
        this.nodeName = node.name
        this.type = node.type
      }


    },

    async attributeInformation(node) {

      console.log(node)

      let params = node
      let data = localStorage.getItem('data');
      let arr = JSON.parse(data)
      params.project_id = arr.id;

      const response = await artApi("attributeInformation", params)

      if (response.code == 200) {

        this.tableData = response.data

      }


    },


    zwtp() {
      var option = {
        title: {
          text: '暂无知识图谱',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#999',
            fontSize: 24
          }
        },
        graphic: [{
          type: 'image',
          z: 0,
          style: {
            image: 'https://img.alicdn.com/tfs/TB1YRYwQpXXXXXdaXXXXXXXXXXX-300-300.png', // 示例图片，可以替换为其他图片地址
            width: 100,
            height: 100
          },
          left: 'center',
          top: 'middle'
        }],
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        series: []
      };
      return option;
    },


    // 数据列表
    async handleFilter(event) {

      event.preventDefault();

      let data = localStorage.getItem('data');
      let arr = JSON.parse(data)
      this.listQuery.project_id = arr.id


      const response = await artApi("institutionalEvents", this.listQuery)

      if (response.code == 200) {

        if (response.data == "") {
          this.show = false;
        } else {
          this.show = true;
        }

        this.timeList = response.data

      }

      this.dhtitleList = []
      this.nodeName = ""
      this.type = ""
      this.tableData = []

    },
    async handleFilterTitle() {


      const response = await artApi("institutionalEvents", this.listQuery)

      if (response.code == 200) {

        if (response.data == "") {
          this.show = false;
        } else {
          this.show = true;
        }


        this.timeList = response.data

      }

      this.dhtitleList = []
      this.nodeName = ""
      this.type = ""
      this.tableData = []

    },

  }
}
</script>

<style lang="scss" scoped>
.always-underlined {
  text-decoration: underline;
}
.custom-font {
  color: rgba(0, 0, 0, 0.85);
  font-size: 12px;
  line-height: 1.5715;
  word-break: break-word;
  overflow-wrap: break-word;
  font-weight: normal !important;
}

::v-deep .el-card.is-always-shadow {
  min-height: 60px;
}
::v-deep .el-card__body {
  padding: 10px;
}
::v-deep .el-table__empty-text {
  font-weight: normal !important;
  font-size: 12px;
}

::v-deep .el-table__row {
  height: 30px; /* 设置你想要的行高 */

  td {
    padding: 5px 0;
  }
}

html,
body,
.app-container {
  height: 100%; /* 设置 html 和 body 以及 .app-container 的高度为 100% */
  margin: 0; /* 清除默认边距 */
}

.dhtitle {
  margin-top: 5px;
  color: #6ea3fd;
}

.myTable1 {
  background-color: #fff;
  // padding: 40px 20px 0px 20px;
}
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}
.bixi-group-container-title {
  color: #363b45;
  font-size: 12px;
  font-weight: 550;
  margin: -4px 0;
  margin-top: 2px;
}
.bixi-group-container-blue-block {
  background: #4d67be;
  border-radius: 0 4px 4px 0;
  display: inline-block;
  height: 12px;
  margin-right: 4px;
  position: relative;
  top: 1px;
  width: 3px;
}

.groupcontainer-title-F4sp83QczG {
  font-size: 12px;
  font-weight: 600;
}

.bixi-group-container-description {
  color: #b9bbbe;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px;
  margin-left: 8px;
}

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 设置最大显示行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  // width: 200px;
  // border: 1px solid #ccc;
  // padding: 5px;
}
.badge-container {
  cursor: pointer;
  margin-left: 10px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  background-color: #e8f4ff;
  border-color: #d1e9ff;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #1890ff;
}

.badge-left {
  margin-right: 10px;
  color: #1890ff;
}

.badge-right {
  background-color: #2bd6d6;
  border-radius: 10px;
  padding: 0px 10px;
  color: #333;
  // box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15),
  //   /* 外部阴影 */ inset 0 -3px 5px rgba(255, 255, 255, 0.7);
  /* 内部上阴影 */

  /* 添加过渡效果 */
}
</style>
